<%@include file="include.jsp" %>
<html>
<head>
<title>On demand</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $( "#startTime" ).datetimepicker({
    	showSecond: false,
    	timeFormat: 'HH:mm:ss',
    	stepHour: 1,
    	stepMinute: 10
    });
  });
  
  $(function() {
	    $( "#endTime" ).datetimepicker({
	    	showSecond: false,
	    	timeFormat: 'HH:mm:ss',
	    	stepHour: 1,
	    	stepMinute: 10
	    });
  });
  
  function doAjaxPost(){
		// get form values
		var start = $("#startTime").val();
	    var end = $("#endTime").val();
		var startTime = Date.parse(start);
		var endTime = Date.parse(end);
		
		var difference = (endTime-startTime) / (60000 * 10);  // 10min is the minimum request
		 if(isNaN(startTime)){
			 alert("Start of time range cannot be empty");
			 return false;
		 }
		 if(isNaN(endTime)){
			 alert("End of time range cannot be empty");
			 return false;
		 }
		 
		 var date = new Date();
		 if(startTime > date.getTime() | endTime > date.getTime()){
			 alert("Time range must be before now");
			 return false;
		 }
		 
		 if(difference <= 0){
			 alert("The start time must come before the end time.");
			 return false;
		 }
		 if(difference < 1){
			 alert("The range must be at least 10min apart.");
			 return false;
		 }
		
		$.ajax(
			{
				type: "POST",
				url:  "/dashboard/report/ondemand",
				data: "start=" + start + "&end=" + end,
				success: function(response){
					var json = jQuery.parseJSON(response);
					$("#box2").html(json.reports);
				},
				error: function(e){
					alert("Error Ajax Request: " + e);
				}
			}
		);
	}
</script>
</head>
<%@include file="header.jsp" %>
<body>
<div id="bg">
	<div id="outer">
		<div id="header">
			<div id="logo">
				<h1>
				Database Tuning
				</h1>
			</div>
	    	<%@include file="navigation.jsp" %>
	    </div>
		<div id="main">
			<div id="left">
				<div id="box1">
				<fieldset>
				<legend>On Demand Range</legend>
				<dl>
					<dt><label for="start">Start: </label></dt>
					<dd><input id="startTime" name="startTime" type="text" /></dd>
				</dl>
				<dl>
					<dt><label for="end">End: </label></dt>
					<dd><input id="endTime" name="endTime" type="text" /></dd>
				</dl>
				</fieldset>
				<fieldset>
				<input type="button" name="button" value="Submit" onclick="return doAjaxPost()" />
				</fieldset>
				</div>
			</div>
			<div id="right">
				<div id="box2"></div>
			</div>
		</div>
			<br class="clear" />
			<%@include file="footer.jsp" %>
	</div>
</div>
</body>
</html>